{% extends "base.html" %}

{% block content %}
<div class="card">
  <h1>{{ app_name }}</h1>
  <p class="subtitle">A Todo list, server-rendered with HTMX.</p>

  <form class="todo-form" hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend"
        hx-on::after-request="if (event.detail.successful) this.reset()">
    <input type="text" name="title" placeholder="What needs doing?" required autocomplete="off" />
    <button type="submit">Add</button>
  </form>

  <ul id="todo-list">
    {% for todo in todos %}
      {% include "partials/todo_item.html" %}
    {% else %}
      {% include "partials/empty_state.html" %}
    {% endfor %}
  </ul>
</div>
{% endblock %}